<template>
  <view class="chat-wrap">
    <view class="common-header-bg">
      <view
        class="header-tab header-common"
        :style="{ paddingTop: titleHeight + 3 + 'px', 'margin-bottom': '5px' }"
      >
        <view class="header-item header-item-active">对话</view>
        <view class="header-item" @tap="gotoGroup">跑团</view>
        <view @tap="gotoMe">我的</view>
      </view>
      <image class="robot-img" src="../../static/robot.png"></image>
      <scroll-view
        class="scroll-view"
        scroll-anchoring
        enable-passive
        enhanced
        :show-scrollbar="false"
        scroll-y="true"
        :scroll-top="scrollTop"
        :style="{ height: screenHeight - titleHeight - 250 + 'px' }"
      >
        <view ref="chatRefs" class="message-box">
          <view v-for="(item, index) in messageLists" :key="index">
            <view
              class="msg-box msg-left"
              v-if="item.role === 'robot'"
            >
              <view class="loading-box" v-if="!item.robotReply && item.type !== 'applet' && item.type !== 'question' && isLoading">
                <text>正在思考中</text>
                <section class="dots-container">
                  <view class="dot"></view>
                  <view class="dot"></view>
                  <view class="dot"></view>
                </section>
              </view>
              <!-- <image src="../../static/logo.png" class="msg-avart"></image> -->
              <view v-if="item.robotReply || item.type === 'applet' || item.show" :class="['message', 'message-left', {'message-applet': item.type === 'applet'}]" style="white-space:pre-wrap;">
                <text class="msg-card" style="white-space:pre-wrap;">
                  {{ item.robotReply }}
                </text>
                <button
                  v-if="item.btnTxt"
                  type="primary"
                  class="msg-btn"
                  @tap="gotoPage(item)"
                >
                  {{ item.btnTxt }}
                </button>
                <image
                  v-if="item.type === 'applet'"
                  class="applet-img"
                  src="https://model-capability.oss-cn-beijing.aliyuncs.com/pro/healthRun/applet-card.png"
                  @tap="gotoProgram"
                ></image>
                <view class="guess-ask" v-if="item.type === 'question'">
                  <view class="ask-header">
                    <image class="ask-img" src="../../static/cainixiangwen.png" alt=""></image>
                    <view class="ask-change" v-if="item.questionList.length > 2" @tap="listPresetQuestion(item, index)">
                      <text>换一换</text>
                      <image src="../../static/huanyihuan.png"></image>
                    </view>
                  </view>
                  <view class="ask-question">
                    <view class="item-question" v-for="(it, idx) in item.questionList" :key="idx" @tap="handleTapQuestion(it)">
                      <view class="question-box">
                        <text class="ask-num">{{idx + 1}}</text>
                        <view class="question-txt">{{it.question}}</view>
                      </view>
                      <image class="icon-arrow" src="https://model-capability.oss-cn-beijing.aliyuncs.com/pro/healthRun/icon-arrow-right.png"></image>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="msg-box msg-right" v-if="item.role === 'user' && item.userReply">
              <view class="message message-right">
                {{ item.userReply }}
              </view>
              <!-- <image
                :src="
                  userInfo.customers.gender == 1
                    ? '../../static/avart-boy.png'
                    : '../../static/avart-girl.png'
                "
                class="msg-avart"
              ></image> -->
            </view>
          </view>
        </view>
      </scroll-view>
      <!-- <button @touchstart="streamRecord" @touchend="endStreamRecord" form-type="submit" type="primary"
        class="fc-white">语音识别按钮</button>
      <view> 语音识别内容：{{currentText}} </view> -->

      <!-- 语音音阶动画 长按说话时的动画 -->
      <view class="prompt" v-if="animation">
        <image class="yuyin-asnition" src="../../static/yuyin-asnition.gif"></image>
        <!-- <section class="dots-container">
          <view class="dot"></view>
          <view class="dot"></view>
          <view class="dot"></view>
          <view class="dot"></view>
          <view class="dot"></view>
        </section>
        <text>录音中...</text> -->
      </view>
    </view>
    <view class="input-box" :style="{ bottom: bottomVal }">
      <view class="input-inner">
        <view class="voice-box" @tap="changeInput">
          <image
            :src="isVoice ? '../../static/jianpan.png' : '../../static/yuyin.png'"
          ></image>
        </view>
        <view class="input-con" v-if="!isVoice">
          <input
            class="weui-input"
            :adjust-position="false"
            :value="currentText"
            placeholder="输入你的问题"
            @input="getSendValue"
            @focus="inputBindFocus"
            @blur="inputBindBlur"
          />
          <button class="send-btn" type="primary" @tap="handleCensorChat(1)">发送</button>
        </view>
        <button
          v-else
          class="send-btn chat-btn"
          @longpress="streamRecord"
          @touchend="endStreamRecord"
          form-type="submit"
          type="primary"
        >
          按住说话
        </button>
      </view>
      <p class="label-txt">该内容由AI生成，仅供参考，请谨慎识别</p>
    </view>
    <uni-popup ref="reportNotice" class="importantNotice reportNotice" type="center" style="z-index: 9999">
      <view class="popup-content">
        <image class="bigImage" mode="widthFix" :src="reportData?.popupUrl" @tap="gotoReport"></image>
        <image class="close-btn" src="../../static/guanbi@2x.png" @tap="closeReportNotice"></image>
      </view>
    </uni-popup>
    <uni-popup ref="importantNotice" class="importantNotice" type="center" style="z-index: 9996">
			<view class="advertisement" :style="{'background-image': 'url(' + popupBg + ')'}">
				<view class="popup-content">
					<image class="bigImage" mode="widthFix" :src="noticeImage" @tap="gotoPop"></image>
					<image class="close-btn" src="../../static/guanbi@2x.png" @tap="closeNotice"></image>
				</view>
			</view>
    </uni-popup>
  </view>
</template>

<script>
import { onLaunch, onLoad, onShow, onHide, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import * as API from "../../api/api";
import * as TextEncoding from "text-encoding-shim";
// import Advertisement from "../components/advertisement"
import { storeToRefs } from "pinia";
import { throttle, timeConvert, getTime } from "../../utils/util";
import { fetchStreamChat } from "../../api/fetch.ts";
import { fetchEventSource } from "@microsoft/fetch-event-source";
import { useAppStore } from "../../store/app";
import { useCommonStore } from "../../store/common";
import { useRunInfoStore } from "../../store/runInfo";
import AbortController from "abort-controller/dist/abort-controller";
import { userLoginStore } from "../../store/userLogin";
import { useShareStore } from "../../store/share";
import { useChatStore } from "../../store/chat"
const useShareData = useShareStore()
const userLoginData = userLoginStore();
const useRunInfoData = useRunInfoStore();
const useAppData = useAppStore();
const useCommonData = useCommonStore();
const useChatData = useChatStore()
const { totalMileage, runMileage, remainingMileage, importantNotice, popupExpire, backgroundImg, popupUrl, sportRange } = storeToRefs(useRunInfoData);
var plugin = requirePlugin("WechatSI");
let manager = plugin.getRecordRecognitionManager();
export default {
	// components: ["Advertisement"],
  data() {
    return {
      scrollTop: 0,
      str: "",
      p: 0,
      isVoice: false,
      otherAppInfo: {
        appId: "wx5a128f1216bbb3b3",
        path: "/pages/home/index",
      },
      userInfo: null,
      titleHeight: useAppData.titleHeight,
      screenHeight: useAppData.screenHeight,
      currentText: "",
      animation: false,
      messageLists: [],
      bottomVal: 0,
      isDisabled: false,
      questionType: 1,
      questionId: null,
      questionList: [],
      showImportantNotice: false,
      isLoading: false,
      reportData: null
    };
  },
  computed: {
    popupExpireTime() {
      return popupExpire.value
    },
    noticeImage() {
      return importantNotice.value
    },
    popupBg() {
      return backgroundImg.value
    },
    popupHref() {
      return popupUrl.value
    }
  },
  watch: {
    popupExpireTime(val) {
      const time = new Date().getTime()
      console.log(val, time)
      if (Number(val) > Number(time)) {
        this.$refs['importantNotice'].open()
      }
    }
  },
  methods: {
    // 获取报告弹窗
    getReportImg() {
      if (!this.userInfo || !this.userInfo?.customers?.customerId) {
        useRunInfoData.getConfigList()
        return
      }
      API.getSportReport({ userId: this.userInfo?.customers?.customerId })
        .then((res) => {
          if (res.code === 0 && res.data) {
            this.reportData = res.data
            if (this.reportData.popupUrl) {
              useRunInfoData.setPopupExpire('')
              useRunInfoData.setInitReportType(this.reportData.type || "day")
              this.$refs['reportNotice'].open()
            } else {
              useRunInfoData.getConfigList()
              useRunInfoData.setInitReportType("day")
            }
          }
        })
        .catch((err) => {
          if (!this.reportData) {
            useRunInfoData.getConfigList()
            useRunInfoData.setInitReportType("day")
          }
        });
    },
    gotoReport() {
      if (!this.reportData?.skipUrl) return
      this.$refs['reportNotice'].close()
      uni.navigateTo({
        url: this.reportData?.skipUrl
      });
    },
    gotoPop() {
      if (!this.popupHref) return
      uni.reLaunch({
        url: this.popupHref
      });
    },
    gotoGroup() {
      uni.reLaunch({
        url: "/runGroupPages/index/index"
      });
    },
    closeReportNotice() {
      this.$refs['reportNotice'].close()
      useRunInfoData.getConfigList()
      useRunInfoData.setInitReportType("day")
    },
    closeNotice() {
      this.$refs['importantNotice'].close()
    },
    gotoMe() {
      uni.reLaunch({
        url: "/pages/me/me",
      });
    },
    inputBindFocus(e) {
      // 获取手机键盘的高度，赋值给input 所在盒子的 bottom 值
      // 注意!!! 这里的 px 至关重要!!! 我搜到的很多解决方案都没有说这里要添加 px
      this.bottomVal = e.detail.height + "px";
    },

    inputBindBlur() {
      // input 失去焦点，键盘隐藏，设置 input 所在盒子的 bottom 值为0
      this.bottomVal = 0;
    },

    handleTapQuestion: function (item) {
      // uni.showLoading({
        // title: "加载中",
      // });
      this.questionId = item.uuid
      this.currentText = item.question
      this.handleCensorChat(2)
    },

    handleSendMsg: function () {
      // if (!this.isVoice) {
        // uni.showLoading({
        //   title: "加载中",
        // });
      // }
      this.isLoading = true
      const _this = this;
      this.messageLists.push({ robotReply: "", role: "robot" });
      let params = {
        content: this.questionType == 1 ? this.currentText : this.questionId,
        userId: this.userInfo?.customers?.customerId,
        questionType: this.questionType
      };
      const requestTask = uni.request({
        url: API.modelChat,
        data: params,
        method: "POST",
        enableChunked: true,
        success: (response) => {
        },
        fail: (err) => {
          console.log("sse链接失败");
          // uni.hideLoading();
          this.isLoading = false
        },
        complete: function () {
          _this.currentText = "";
          if (_this.questionType == 2) {
            _this.getQuestionList()
          }
        },
      });

      requestTask.onChunkReceived((chunk) => {
        this.isLoading = false
        // uni.hideLoading();
        const arrayBuffer = chunk.data;
        const uint8Array = new Uint8Array(arrayBuffer);
        const decodeBase64Str = new TextEncoding.TextDecoder("utf-8").decode(uint8Array);
        this.str += decodeBase64Str;
        this.decodeFn();
      });
    },

    parseStr(str) {
      const _this = this;
      const _str = str.substring(5);
      try {
        const message = JSON.parse(_str);
        if (!message.endFlag) {
          let lastIndex = this.messageLists.length - 1;
          this.messageLists[lastIndex].robotReply += message.content;
          throttle(_this.scrollBottom(100), 1000);
        }
      } catch (err) {
        console.log(err);
      }
    },

    decodeFn() {
      while (this.str.indexOf("data:", this.p) !== -1) {
        let line = "";
        const nextIndex = this.str.indexOf("data:", this.p);
        line = this.str.substring(this.p - 1, nextIndex);
        this.p = nextIndex + 1; // 移动到下一个字符
        if (line.trim()) {
          this.parseStr(line);
        }
      }
    },

    scrollBottom(num) {
      this.$nextTick(() => {
        uni
          .createSelectorQuery()
          .in(this)
          .select(".message-box")
          .boundingClientRect((res) => {
            let top = res.height - (this.screenHeight - this.titleHeight - 500);
            if (top > 0) {
              this.scrollTop = top + num;
            }
          })
          .exec();
      });
    },

    getSendValue: function (e) {
      this.currentText = e.detail.value;
    },

    noLoginMessage: function(initType) {
      this.messageLists = [{
        robotReply: "hi，我是智能走跑AI数字人小康，很高兴能认识你～作为本次2024廊坊首届全民健康走跑大会的任务发布官，我不仅能陪伴你完成全程跑步，还能陪你对话聊天噢。你可以问我“跑步有哪些好处”，快向我发送消息吧！",
        type: "init",
        role: "robot",
        btnTxt: "开始跑步",
        url: "/pages/login/login",
      }];
      this.getQuestionList(initType)
    },

    handleSpeed: function(pace) {
      if (pace > 0) {
        let min = (pace/60).toFixed(2)
        let matchSpeedObj = timeConvert(min)
        return `${matchSpeedObj.min}'${matchSpeedObj.sen}"`
      } else {
        return `0'00"`
      }
    },

    // 登录后的推送消息
    initMessage: function (initType) {
      this.messageLists = [];
      if (!this.userInfo?.customers?.customerName) {
        this.messageLists.push({
          robotReply:
            "hi，我是智能走跑AI数字人小康。欢迎参加2024廊坊首届全民健康走跑大会，开始跑步前，请先填写你的个人资料。",
          btnTxt: "填写个人资料",
          url: "/pages/personInfo/personInfo",
          type: "profile",
          role: "robot",
        });
        this.getQuestionList()
      } else {
        let txt = "你的个人资料已填写，快来参与跑步吧。9.9-10.7期间，累计完成75公里，即算完赛，可获得丰厚奖励噢～";
        console.log("首页里程数据")
        uni.showLoading({
          title: "加载中..."
        })
        useRunInfoData.onListMileage().then((res) => {
          console.log("查询里程成功", res)
          this.isLoading = false
          uni.hideLoading()
          if (res) {
            if (Number(res.distanceTotal) > 0) {
              txt = `你已累计运动${res.distanceTotal}公里，距离总目标还差${remainingMileage.value}公里，马上就能完成一场专属于你的马拉松啦。快开始今天的跑步运动吧～`;
            }
            if (Number(res.distanceTotal) > 75) {
              txt = `你已累计运动${res.distanceTotal}公里，恭喜你已经完成了一场专属于你的马拉松！“奔跑廊坊”活动仍在进行中，请和小康一起继续保持运动，向更高目标迈进吧！快开始今天的跑步运动吧～`
            }
          }
          useRunInfoData.onGetSportsAdvise().then(response => {
            // 无模型话术，直接展示原话术
            if (!response || !response.data || !response.data.advice) {
              if (Number(res.distanceTotal) > 0) {
                txt = `你已累计运动${res.distanceTotal}公里，距离总目标还差${remainingMileage.value}公里，马上就能完成一场专属于你的马拉松啦。快开始今天的跑步运动吧～`;
              }
              if (Number(res.distanceTotal) > 75) {
                txt = `你已累计运动${res.distanceTotal}公里，恭喜你已经完成了一场专属于你的马拉松！“奔跑廊坊”活动仍在进行中，请和小康一起继续保持运动，向更高目标迈进吧！快开始今天的跑步运动吧～`
              }
            }
            // 有昨日运动，有模型话术，展示新话术
            if (res && Number(response.data.preDayDistance) > 0 && response.data.advice) {
              let pace = this.handleSpeed(Number(response.data.preDayBestPace))
              let time = Math.ceil(Number(response.data.preDayDuration)/60)
              if (Number(res.distanceTotal) > 0) {
                txt = `昨天你累计跑了${response.data.preDayDistance}公里，耗时${time}分钟，最佳平均配速为${pace},目前已累计运动${res.distanceTotal}公里，距离总目标还差${remainingMileage.value}里，马上就能完成一场专属你的马拉松啦。
                
${response.data.advice}快开始今天的跑步运动吧~`
              }
              if (Number(res.distanceTotal) > 75) {
                txt = `昨天你累计跑了${response.data.preDayDistance}公里，耗时${time}分钟，最佳平均配速为${pace},目前已累计运动了${res.distanceTotal}公里，恭喜你已经完成了一场专属于你的马拉松！“奔跑廊坊”活动仍在进行中，请和小康一起继续保持运动，向更高目标迈进吧！ 

${response.data.advice}快开始今天的跑步运动吧~`
              }
            }
            // 无昨日运动，有模型话术，展示原话术+模型建议
            if (res && !response.data.preDayDistance && response.data.advice) {
              if (Number(res.distanceTotal) > 0) {
                txt = `你已累计运动${res.distanceTotal}公里，距离总目标还差${remainingMileage.value}公里，马上就能完成一场专属于你的马拉松啦。快开始今天的跑步运动吧～

${response.data.advice}快开始今天的跑步运动吧~`;
              }
              if (Number(res.distanceTotal) > 75) {
                txt = `你已累计运动${res.distanceTotal}公里，恭喜你已经完成了一场专属于你的马拉松！“奔跑廊坊”活动仍在进行中，请和小康一起继续保持运动，向更高目标迈进吧！快开始今天的跑步运动吧～

${response.data.advice}快开始今天的跑步运动吧~`
              }
            }
            this.messageLists.push(
              {
                robotReply: txt,
                btnTxt: "开始跑步",
                url: "/pages/index/index",
                type: "run",
                role: "robot",
              },
              {
                robotReply: "",
                type: "applet",
                role: "robot",
              }
            );
            this.getQuestionList(initType)
          }).catch(err => {
            console.log("err", err)
            this.messageLists = []
            this.messageLists.push(
              {
                robotReply: txt,
                btnTxt: "开始跑步",
                url: "/pages/index/index",
                type: "run",
                role: "robot",
              },
              {
                robotReply: "",
                type: "applet",
                role: "robot",
              }
            );
            this.getQuestionList(initType)
          })
        }).catch((err) => {
          console.log("err-2", err)
          uni.hideLoading()
          console.log(err, "里程统计错误")
          this.messageLists = []
          this.messageLists.push(
            {
              robotReply: txt,
              btnTxt: "开始跑步",
              url: "/pages/index/index",
              type: "run",
              role: "robot",
            },
            {
              robotReply: "",
              type: "applet",
              role: "robot",
            }
          );
          this.getQuestionList(initType)
        });
      }
    },
    sendMessage: function () {
      this.messageLists.push({ userReply: this.currentText, role: "user" });
      this.scrollBottom(0);
      this.handleSendMsg();
    },
    changeInput: function () {
      this.isVoice = !this.isVoice;
    },
    gotoProgram: function () {
      useCommonData.getBizParam().then(res => {
        useCommonData.gotoMiniProgram(this.otherAppInfo);
      })
    },
    gotoPage: function (item) {
      let prePage = "/pages/chat/chat";
      if (item.url === "/pages/index/index") {
        uni.reLaunch({
          url: `/pages/index/index?prePage=${prePage}`,
        });
      } else {
        if (item.type === "init") {
          uni.showToast({
            title: "请先登录，再开始跑步",
            icon: "none"
          })
          setTimeout(() => {
            uni.navigateTo({
              url: item.url,
            });
          }, 1500)
        } else {
          uni.navigateTo({
            url: item.url,
          });
        }
      }
    },
    streamRecord: function () {
      console.log("开始");
      const that = this;
      that.animation = true;
      uni.getSetting({
        success: (res) => {
          if (res.authSetting["scope.record"]) {
            manager.start({
              lang: "zh_CN",
            });
          } else {
            uni.authorize({
              scope: "scope.record",
              success: () => {
                console.log("麦克风授权成功");
              },
              fail: () => {
                console.log("麦克风授权失败");
                that.animation = false;
                that.openConfirm();
              },
            });
          }
        },
      });
    },

    openConfirm() {
      return new Promise((resolve, reject) => {
        uni.getSetting({
          success: (res) => {
            if (res.authSetting["scope.record"]) {
              console.log("授权麦克风成功");
            } else {
              console.log("授权麦克风失败");
              uni.showModal({
                title: "请求授权麦克风功能",
                content: "我们需要获取你的语音信息",
                showCancel: false,
                success: (res) => {
                  if (res.confirm) {
                    uni.openSetting({
                      success(res) {
                        resolve();
                      },
                    });
                  } else if (res.cancel) {
                    reject();
                  }
                },
              });
            }
          },
        });
      });
    },

    endStreamRecord: function () {
      this.animation = false;
      console.log("结束");
      manager.stop();
      uni.getSetting({
        success: (res) => {
          if (res.authSetting["scope.record"]) {
            uni.showLoading({
              title: "语音识别中...",
              icon: "none",
            });
          }
        },
      });
    },
    initRecord: function () {
      manager.onStart = (res) => {
        console.log("开始录音", res);
      };
      //有新的识别内容返回，则会调用此事件
      manager.onRecognize = (res) => {
        console.log("识别内容", res);
        let text = res.result;
        this.currentText = text;
      };
      // 识别结束事件
      manager.onStop = (res) => {
        console.log(res, 37);
        let text = res.result;
        if (text == "") {
          console.log("没有说话");
          return;
        }
        this.currentText = text;
        uni.hideLoading();
        this.handleCensorChat(1);
      };

      manager.onError = (err) => {
        uni.hideLoading();
        uni.showToast({
          title: "语音识别失败，请重试",
          icon: "none",
        });
        console.log("录音识别错误", err);
      };
    },
    handleCensorChat: function (type) {
      this.questionType = type
      console.log("this.questionType", this.questionType, type)
      const _this = this;
      const reg = /\S/;
      if (!reg.test(this.currentText)) {
        uni.showToast({
          title: "请先输入问题！",
          icon: "none"
        })
        return;
      }
      API.textCensorChat({ content: this.currentText })
        .then((res) => {
          if (res.code === 0) {
            if (res.data) {
              _this.sendMessage();
            } else {
              uni.showToast({
                title: "你好，你输入的信息中包含敏感词汇！请更换一个话题",
                icon: "none",
              });
            }
          }
        })
        .catch((err) => {});
    },
    onQuestionMsg: function(initType) {
      this.messageLists.push({
        questionList: this.questionList,
        role: "robot",
        show: true,
        type: "question",
      })
      if (initType && initType === "init") {
        this.scrollBottom(-350);
      } else {
        this.scrollBottom(0);
      }
    },

    listPresetQuestion: function(item, index) {
      useChatData.listPresetQuestion().then(res => {
        this.questionList = res.questions || []
        this.messageLists.map((it, idx) => {
					if (idx === index) {
						item.questionList = this.questionList
					}
        })
      })
    },

    getQuestionList: function(initType) {
      useChatData.listPresetQuestion().then(res => {
        this.questionList = res.questions || []
        this.onQuestionMsg(initType)
      })
    },
  },

  onHide() {
    // useRunInfoData.setPopupExpire('')
  },
  onLoad() {
    console.log("onLoad===")
    this.initRecord();
  },
  onShow() {
    console.log("onShow")
    let optionsSync = uni.getLaunchOptionsSync()
    if (optionsSync?.query?.shareType === "circle" && optionsSync?.scene === 1154) {
      this.messageLists = [{
        robotReply: "请点击底部'前往小程序按钮'体验更多功能",
        type: "profile",
        role: "robot",
      }];
    } else {
      this.isDisabled = false
      this.messageLists = [];
      this.currentText = ""
      let token = uni.getStorageSync("token") || null
      if (token) {
        this.userInfo = JSON.parse(uni.getStorageSync("userInfo"));
        this.initMessage("init");
      } else {
        uni.login({
          provider: "weixin",
          success: (res) => {
            userLoginData.getOpenId(res.code).then((res1) => {
              userLoginData.getUserInfoData().then((res2) => {
                this.userInfo = JSON.parse(uni.getStorageSync("userInfo"));
                this.initMessage("init");
              });
            }).catch(err => {
              this.noLoginMessage("init")
            })
          },
          fail: (err) => {
            console.log("err-login", err)
          },
        });
        //  useRunInfoData.getConfigList()
        useRunInfoData.setInitReportType("day")
      }
      this.getReportImg()
    }
    if (!useRunInfoData.isRuning) {
      useRunInfoData.endTask("end");
    }
  },
  onShareAppMessage() {
    return useShareData.shareInfo
  },
  onShareTimeline() {
    return useShareData.shareInfo
  }
};
</script>

<style lang="scss" scoped>
.scroll-view {
  overflow-anchor: none;
}
.header-common {
  background: transparent;
}
.robot-img {
  width: 724rpx;
  height: 152rpx;
  margin-left: 8rpx;
}
.yuyin-asnition {
  width: 528rpx;
  height: 328rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.message-box {
  display: flex;
  flex-direction: column;
  padding: 10rpx 32rpx;
  overflow: auto;
  .msg-box {
    display: flex;
    .msg-avart {
      width: 80rpx;
      height: 80rpx;
      flex-shrink: 0;
    }
  }
  .msg-left {
    float: left;
  }
  .msg-right {
    float: right;
  }
  .message {
    margin-bottom: 40rpx;
    padding: 32rpx 34rpx;
    color: #ffffff;
    display: flex;
    flex-direction: column;
  }
  .message-left {
    color: #222222;
    background: #ffffff;
    border-radius: 0rpx 24rpx 24rpx 24rpx;
    // margin-left: 14rpx;
    .applet-img {
      width: 412rpx;
      height: 444rpx;
    }
    .msg-btn {
      width: 100%;
      height: 80rpx;
      background: #08cb8f;
      border-radius: 16rpx;
      font-weight: 500;
      font-size: 32rpx;
      text-align: center;
      line-height: 80rpx;
      margin-top: 30rpx;
    }
  }
  .message-applet{
    padding: 0;
  }
  .message-right {
    background: #08cb8f;
    border-radius: 24rpx 0rpx 24rpx 24rpx;
    // margin-right: 14rpx;
  }
  .guess-ask{
    min-width: 60vw;
    .ask-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32rpx;
      .ask-img{
        width: 132rpx;
        height: 32rpx;
      }
      .ask-change{
        display: flex;
        align-items: center;
        text{
          font-size: 28rpx;
          color: #595858;
        }
        image{
          width: 24rpx;
          height: 28rpx;
          margin-left: 12rpx;
        }
      }
    }
    .ask-question{
      .item-question{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 44rpx;
        &:last-child{
          margin-bottom: 0;
        }
        .question-box{
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
        }
        text{
          font-family: Arial, Arial;
          font-size: 32rpx;
          color: #FC9B72;
          font-style: italic;
          padding-top: 4rpx;
        }
        .question-txt{
          font-family: PingFangSC, PingFang SC;
          font-size: 28rpx;
          color: #222222;
          padding: 0 18rpx 0 12rpx;
        }
        .icon-arrow{
          width: 28rpx;
          height: 28rpx;
          margin-top: 6rpx;
        }
      }
    }
  }
}
.input-box {
  height: 196rpx;
  background: #ffffff;
  box-shadow: 0rpx -2rpx 2rpx 0rpx rgba(0, 0, 0, 0.05);
  position: absolute;
  left: 0;
  bottom: 0; // 默认 0
  z-index: 199;
  padding: 12rpx 24rpx 0;
  // display: flex;
  // justify-content: space-between;
  .input-con {
    display: flex;
  }
  .voice-box {
    width: 68rpx;
    height: 68rpx;
    background: #f0faf7;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 48rpx;
      height: 48rpx;
    }
  }
  .weui-input {
    width: 450rpx;
    height: 76rpx;
    background: #f3fdfa;
    border-radius: 16rpx;
    margin-left: 16rpx;
    padding-left: 20rpx;
    box-sizing: border-box;
  }
  .send-btn {
    width: 148rpx;
    height: 76rpx;
    background: #08cb8f;
    border-radius: 16rpx;
    text-align: center;
    line-height: 76rpx;
    margin-left: 20rpx;
  }
  .chat-btn {
    width: 618rpx;
  }
  .input-inner{
    display: flex;
    justify-content: space-between;
  }
  .label-txt{
    margin-top: 24rpx;
    text-align: center;
    font-size: 24rpx;
    color: #C0C0C0;
  }
}
/* 动画 */
.prompt {
  width: 528rpx;
  height: 328rpx;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 16rpx;
  position: fixed;
  bottom: 50vh;
  left: 50%;
  transform: translateX(-50%);
}

.prompt text {
  position: absolute;
  bottom: 2px;
  color: white;
  left: calc(45%);
  animation: puls 1.5s infinite ease-in-out;
}

.loading-box{
  display: flex;
  padding: 22rpx 24rpx;
  background: #fff;
  border-radius: 0rpx 24rpx 24rpx 24rpx;
  text{
    flex-shrink: 0;
    padding-right: 18rpx;
    color: #595858;
  }
}
.dots-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dot {
  height: 10rpx;
  width: 10rpx;
  margin-right: 15rpx;
  border-radius: 20rpx;
  background: #08cb8f;
  animation: pulse 1.5s infinite ease-in-out;
}

.dot:last-child {
  margin-right: 0;
}

.dot:nth-child(1) {
  animation-delay: -0.3s;
}

.dot:nth-child(2) {
  animation-delay: -0.1s;
}

.dot:nth-child(3) {
  animation-delay: 0.1s;
}

@keyframes pulse {
  0% {
    transform: scale(0.3);
    background-color: #08cb8f;
    /* 更改为与.dot背景色相近的颜色 */
    // box-shadow: 0 0 0 0 rgba(102, 163, 255, 0.7);
    /* 使用相同的颜色 */
  }

  50% {
    transform: scale(2);
    background-color: #08cb8f;
    /* 稍浅的颜色，增加对比度 */
    // box-shadow: 0 0 0 10px rgba(174, 218, 255, 0);
    /* 使用.dot的结束颜色，但透明度为0 */
  }

  100% {
    transform: scale(0.3);
    background-color: #08cb8f;
    /* 与0%时的颜色相同 */
    // box-shadow: 0 0 0 0 rgba(102, 163, 255, 0.7);
    /* 与0%时的box-shadow相同 */
  }
}

@keyframes puls {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(0px);
  }
}
.chat-wrap {
  height: 100vh;
  background: #f6fdfb;
  position: relative;
}
.gray-out {
  pointer-events: none;
  background-color: rgba(128, 128, 128, 0.5); /* 灰色半透明背景 */
}
.gray-out::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  z-index: 9999;
}

.advertisement{
	width: 100vw;
	height: 100vh;
	text-align: center;
	// background: url('https://model-capability.oss-cn-beijing.aliyuncs.com/pro/healthRun/bg-caidai.png') 0 0 no-repeat;
	background-size: 100% 100%;
	position: fixed;
	left: 0;
	top: 0;
}
.importantNotice{
  position: relative;
  :deep(.uni-popup) {
    z-index: 9999;
  }
  .popup-content{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    .bigImage{
      width: 720rpx;
      // height: 850rpx;
    }
    .close-btn{
      width: 84rpx;
      height: 84rpx;
      margin-top: 40rpx;
    }
  }
}
.reportNotice{
  .bigImage{
    width: 624rpx!important;
  }
}
</style>
